<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="generator" content="JsDoc Toolkit" />
		
		<title>JsDoc Reference - pv.Dot</title>

		<style type="text/css">
			/* default.css */
body
{
	font: 12px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
	width: 800px;
}

.header
{
	clear: both;
	background-color: #ccc;
	padding: 8px;
}

h1
{
	font-size: 150%;
	font-weight: bold;
	padding: 0;
	margin: 1em 0 0 .3em;
}

hr
{
	border: none 0;
	border-top: 1px solid #7F8FB1;
	height: 1px;
}

pre.code
{
	display: block;
	padding: 8px;
	border: 1px dashed #ccc;
}

#index
{
	margin-top: 24px;
	float: left;
	width: 160px;
	position: absolute;
	left: 8px;
	background-color: #F3F3F3;
	padding: 8px;
}

#content
{
	margin-left: 190px;
	width: 600px;
}

.classList
{
	list-style-type: none;
	padding: 0;
	margin: 0 0 0 8px;
	font-family: arial, sans-serif;
	font-size: 1em;
	overflow: auto;
}

.classList li
{
	padding: 0;
	margin: 0 0 8px 0;
}

.summaryTable { width: 100%; }

h1.classTitle
{
	font-size:170%;
	line-height:130%;
}

h2 { font-size: 110%; }
caption, div.sectionTitle
{
	background-color: #7F8FB1;
	color: #fff;
	font-size:130%;
	text-align: left;
	padding: 2px 6px 2px 6px;
	border: 1px #7F8FB1 solid;
}

div.sectionTitle { margin-bottom: 8px; }
.summaryTable thead { display: none; }

.summaryTable td
{
	vertical-align: top;
	padding: 4px;
	border-bottom: 1px #7F8FB1 solid;
	border-right: 1px #7F8FB1 solid;
}

/*col#summaryAttributes {}*/
.summaryTable td.attributes
{
	border-left: 1px #7F8FB1 solid;
	width: 140px;
	text-align: right;
}

td.attributes, .fixedFont
{
	line-height: 15px;
	color: #002EBE;
	font-family: "Courier New",Courier,monospace;
	font-size: 13px;
}

.summaryTable td.nameDescription
{
	text-align: left;
	font-size: 13px;
	line-height: 15px;
}

.summaryTable td.nameDescription, .description
{
	line-height: 15px;
	padding: 4px;
	padding-left: 4px;
}

pre
{
	border-left: solid 10px #ddd;
	padding-left: 1.5em;
}

.summaryTable { margin-bottom: 8px; }

ul.inheritsList
{
	list-style: square;
	margin-left: 20px;
	padding-left: 0;
}

.detailList {
	margin-left: 20px; 
	line-height: 15px;
}
.detailList dt { margin-left: 20px; }

.detailList .heading
{
	font-weight: bold;
	padding-bottom: 6px;
	margin-left: 0;
}

.light, td.attributes, .light a:link, .light a:visited
{
	color: #777;
	font-style: italic;
}

.fineprint
{
	text-align: right;
	font-size: 10px;
}

		</style>
	</head>

	<body>
<!-- ============================== header ================================= -->	
		<!-- begin static/header.html -->
		<div id="header">
</div>
		<!-- end static/header.html -->

<!-- ============================== classes index ============================ -->
		<div id="index">
			<!-- begin publish.classesIndex -->
			<div align="center"><a href="../index.html">Class Index</a>
| <a href="../files.html">File Index</a></div>
<hr />
<h2>Classes</h2>
<ul class="classList">
	
	<li><i><a href="../symbols/_global_.html">_global_</a></i></li>
	
	<li><a href="../symbols/Array.html">Array</a></li>
	
	<li><a href="../symbols/Date.html">Date</a></li>
	
	<li><a href="../symbols/pv.html">pv</a></li>
	
	<li><a href="../symbols/pv.Anchor.html">pv.Anchor</a></li>
	
	<li><a href="../symbols/pv.Area.html">pv.Area</a></li>
	
	<li><a href="../symbols/pv.Bar.html">pv.Bar</a></li>
	
	<li><a href="../symbols/pv.Color.html">pv.Color</a></li>
	
	<li><a href="../symbols/pv.Color.Hsl.html">pv.Color.Hsl</a></li>
	
	<li><a href="../symbols/pv.Color.Rgb.html">pv.Color.Rgb</a></li>
	
	<li><a href="../symbols/pv.Colors.html">pv.Colors</a></li>
	
	<li><a href="../symbols/pv.Dot.html">pv.Dot</a></li>
	
	<li><a href="../symbols/pv.Flatten.html">pv.Flatten</a></li>
	
	<li><a href="../symbols/pv.Image.html">pv.Image</a></li>
	
	<li><a href="../symbols/pv.Label.html">pv.Label</a></li>
	
	<li><a href="../symbols/pv.Layout.grid.html">pv.Layout.grid</a></li>
	
	<li><a href="../symbols/pv.Layout.icicle.html">pv.Layout.icicle</a></li>
	
	<li><a href="../symbols/pv.Layout.stack.html">pv.Layout.stack</a></li>
	
	<li><a href="../symbols/pv.Layout.sunburst.html">pv.Layout.sunburst</a></li>
	
	<li><a href="../symbols/pv.Layout.treemap.html">pv.Layout.treemap</a></li>
	
	<li><a href="../symbols/pv.Line.html">pv.Line</a></li>
	
	<li><a href="../symbols/pv.Mark.html">pv.Mark</a></li>
	
	<li><a href="../symbols/pv.Nest.html">pv.Nest</a></li>
	
	<li><a href="../symbols/pv.ns.html">pv.ns</a></li>
	
	<li><a href="../symbols/pv.Panel.html">pv.Panel</a></li>
	
	<li><a href="../symbols/pv.Rule.html">pv.Rule</a></li>
	
	<li><a href="../symbols/pv.Scale.linear.html">pv.Scale.linear</a></li>
	
	<li><a href="../symbols/pv.Scale.log.html">pv.Scale.log</a></li>
	
	<li><a href="../symbols/pv.Scale.ordinal.html">pv.Scale.ordinal</a></li>
	
	<li><a href="../symbols/pv.Tree.html">pv.Tree</a></li>
	
	<li><a href="../symbols/pv.Vector.html">pv.Vector</a></li>
	
	<li><a href="../symbols/pv.version.html">pv.version</a></li>
	
	<li><a href="../symbols/pv.Wedge.html">pv.Wedge</a></li>
	
</ul>
<hr />
			<!-- end publish.classesIndex -->
		</div>
		
		<div id="content">
<!-- ============================== class title ============================ -->
			<h1 class="classTitle">
				
				Class pv.Dot
			</h1>

<!-- ============================== class summary ========================== -->			
			<p class="description">
				<br />Extends
					<a href="../symbols/pv.Mark.html">pv.Mark</a>.<br />
				
			
				Represents a dot; a dot is simply a sized glyph centered at a given
point that can also be stroked and filled. The <tt>size</tt> property is
proportional to the area of the rendered glyph to encourage meaningful visual
encodings. Dots can visually encode up to eight dimensions of data, though
this may be unwise due to integrality. See <a href="../symbols/pv.Mark.html">pv.Mark</a> for details on the
prioritization of redundant positioning properties.

<p>See also the <a href="../../api/Dot.html">Dot guide</a>.
				
				
					<br /><i>Defined in: </i> <a href="../symbols/src/mark_Dot.js.html">Dot.js</a>.
				
			</p>

<!-- ============================== constructor summary ==================== -->			
			
			<table class="summaryTable" cellspacing="0" summary="A summary of the constructor documented in the class pv.Dot.">
				<caption>Class Summary</caption>
				<thead>
					<tr>
						<th scope="col">Constructor Attributes</th>
						<th scope="col">Constructor Name and Description</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td class="attributes">&nbsp;</td>
						<td class="nameDescription" >
							<div class="fixedFont">
								<b><a href="../symbols/pv.Dot.html#constructor">pv.Dot</a></b>()
							</div>
							<div class="description">Constructs a new dot mark with default properties.</div>
						</td>
					</tr>
				</tbody>
			</table>
			

<!-- ============================== properties summary ===================== -->
			
				
				
				<table class="summaryTable" cellspacing="0" summary="A summary of the fields documented in the class pv.Dot.">
					<caption>Field Summary</caption>
					<thead>
						<tr>
							<th scope="col">Field Attributes</th>
							<th scope="col">Field Name and Description</th>
						</tr>
					</thead>
					<tbody>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Dot.html#angle">angle</a></b>
								</div>
								<div class="description">The rotation angle, in radians.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Dot.html#defaults">defaults</a></b>
								</div>
								<div class="description">Default properties for dots.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Dot.html#fillStyle">fillStyle</a></b>
								</div>
								<div class="description">The fill style; if non-null, the interior of the dot is filled with the
specified color.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Dot.html#lineWidth">lineWidth</a></b>
								</div>
								<div class="description">The width of stroked lines, in pixels; used in conjunction with
<tt>strokeStyle</tt> to stroke the dot's shape.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Dot.html#shape">shape</a></b>
								</div>
								<div class="description">The shape name.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Dot.html#size">size</a></b>
								</div>
								<div class="description">The size of the dot, in square pixels.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont">
								<b><a href="../symbols/pv.Dot.html#strokeStyle">strokeStyle</a></b>
								</div>
								<div class="description">The style of stroked lines; used in conjunction with <tt>lineWidth</tt> to
stroke the dot's shape.</div>
							</td>
						</tr>
					
					</tbody>
				</table>
				
				
				
				<dl class="inheritsList">
				<dt>Fields borrowed from class <a href="../symbols/pv.Mark.html">pv.Mark</a>: </dt><dd><a href="../symbols/pv.Mark.html#bottom">bottom</a>, <a href="../symbols/pv.Mark.html#childIndex">childIndex</a>, <a href="../symbols/pv.Mark.html#cursor">cursor</a>, <a href="../symbols/pv.Mark.html#data">data</a>, <a href="../symbols/pv.Mark.html#index">index</a>, <a href="../symbols/pv.Mark.html#left">left</a>, <a href="../symbols/pv.Mark.html#parent">parent</a>, <a href="../symbols/pv.Mark.html#proto">proto</a>, <a href="../symbols/pv.Mark.html#reverse">reverse</a>, <a href="../symbols/pv.Mark.html#right">right</a>, <a href="../symbols/pv.Mark.html#root">root</a>, <a href="../symbols/pv.Mark.html#scene">scene</a>, <a href="../symbols/pv.Mark.html#title">title</a>, <a href="../symbols/pv.Mark.html#top">top</a>, <a href="../symbols/pv.Mark.html#type">type</a>, <a href="../symbols/pv.Mark.html#visible">visible</a></dd>
				</dl>
				
			

<!-- ============================== methods summary ======================== -->
			
				
				
				<table class="summaryTable" cellspacing="0" summary="A summary of the methods documented in the class pv.Dot.">
					<caption>Method Summary</caption>
					<thead>
						<tr>
							<th scope="col">Method Attributes</th>
							<th scope="col">Method Name and Description</th>
						</tr>
					</thead>
					<tbody>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont"><b><a href="../symbols/pv.Dot.html#anchor">anchor</a></b>(name)
								</div>
								<div class="description">Constructs a new dot anchor with default properties.</div>
							</td>
						</tr>
					
						<tr>
							<td class="attributes">&nbsp;</td>
							<td class="nameDescription">
								<div class="fixedFont"><b><a href="../symbols/pv.Dot.html#radius">radius</a></b>()
								</div>
								<div class="description">Returns the radius of the dot, which is defined to be the square root of the
<a href="#size">#size</a> property.</div>
							</td>
						</tr>
					
					</tbody>
				</table>
				
				
				
				<dl class="inheritsList">
				<dt>Methods borrowed from class <a href="../symbols/pv.Mark.html">pv.Mark</a>: </dt><dd><a href="../symbols/pv.Mark.html#add">add</a>, <a href="../symbols/pv.Mark.html#anchorTarget">anchorTarget</a>, <a href="../symbols/pv.Mark.html#cousin">cousin</a>, <a href="../symbols/pv.Mark.html#def">def</a>, <a href="../symbols/pv.Mark.html#event">event</a>, <a href="../symbols/pv.Mark.html#extend">extend</a>, <a href="../symbols/pv.Mark.html#first">first</a>, <a href="../symbols/pv.Mark.html#last">last</a>, <a href="../symbols/pv.Mark.html#mouse">mouse</a>, <a href="../symbols/pv.Mark.html#render">render</a>, <a href="../symbols/pv.Mark.html#sibling">sibling</a></dd>
				</dl>
				
			
<!-- ============================== events summary ======================== -->
			

<!-- ============================== constructor details ==================== -->		
			
			<div class="details"><a name="constructor"> </a>
				<div class="sectionTitle">
					Class Detail
				</div>
				
				<div class="fixedFont">
						<b>pv.Dot</b>()
				</div>
				
				<div class="description">
					Constructs a new dot mark with default properties. Dots are not typically
constructed directly, but by adding to a panel or an existing mark via
<a href="../symbols/pv.Mark.html#add">pv.Mark#add</a>.
					
				</div>
				
				
				
				
					
					
					
					
					
					
					

			</div>
			

<!-- ============================== field details ========================== -->		
			
				<div class="sectionTitle">
					Field Detail
				</div>
				
					<a name="angle"> </a>
					<div class="fixedFont">
					
					<span class="light">{number}</span>
					<b>angle</b>
					
					</div>
					<div class="description">
						The rotation angle, in radians. Used to rotate shapes, such as to turn a
cross into a plus.
						
						
					</div>
					
					

						
						
						
						

					<hr />
				
					<a name="defaults"> </a>
					<div class="fixedFont">
					
					<span class="light">{<a href="../symbols/pv.Dot.html">pv.Dot</a>}</span>
					<b>defaults</b>
					
					</div>
					<div class="description">
						Default properties for dots. By default, there is no fill and the stroke
style is a categorical color. The default shape is "circle" with size 20.
						
						
					</div>
					
					

						
						
						
						

					<hr />
				
					<a name="fillStyle"> </a>
					<div class="fixedFont">
					
					<span class="light">{string}</span>
					<b>fillStyle</b>
					
					</div>
					<div class="description">
						The fill style; if non-null, the interior of the dot is filled with the
specified color. The default value of this property is null, meaning dots are
not filled by default.
						
						
					</div>
					
					

						
						
						
							<dl class="detailList">
							<dt class="heading">See:</dt>
							
							<dd><a href="../symbols/pv.html#.color">pv.color</a></dd>
							
							</dl>
						
						

					<hr />
				
					<a name="lineWidth"> </a>
					<div class="fixedFont">
					
					<span class="light">{number}</span>
					<b>lineWidth</b>
					
					</div>
					<div class="description">
						The width of stroked lines, in pixels; used in conjunction with
<tt>strokeStyle</tt> to stroke the dot's shape.
						
						
					</div>
					
					

						
						
						
						

					<hr />
				
					<a name="shape"> </a>
					<div class="fixedFont">
					
					<span class="light">{string}</span>
					<b>shape</b>
					
					</div>
					<div class="description">
						The shape name. Several shapes are supported:<ul>

<li>cross
<li>triangle
<li>diamond
<li>square
<li>tick
<li>circle

</ul>These shapes can be further changed using the <a href="#angle">#angle</a> property;
for instance, a cross can be turned into a plus by rotating. Similarly, the
tick, which is vertical by default, can be rotated horizontally. Note that
some shapes (cross and tick) do not have interior areas, and thus do not
support fill style meaningfully.

<p>Note: it may be more natural to use the <a href="../symbols/pv.Rule.html">pv.Rule</a> mark for
horizontal and vertical ticks. The tick shape is only necessary if angled
ticks are needed.
						
						
					</div>
					
					

						
						
						
						

					<hr />
				
					<a name="size"> </a>
					<div class="fixedFont">
					
					<span class="light">{number}</span>
					<b>size</b>
					
					</div>
					<div class="description">
						The size of the dot, in square pixels. Square pixels are used such that the
area of the dot is linearly proportional to the value of the size property,
facilitating representative encodings.
						
						
					</div>
					
					

						
						
						
							<dl class="detailList">
							<dt class="heading">See:</dt>
							
							<dd><a href="#radius">#radius</a></dd>
							
							</dl>
						
						

					<hr />
				
					<a name="strokeStyle"> </a>
					<div class="fixedFont">
					
					<span class="light">{string}</span>
					<b>strokeStyle</b>
					
					</div>
					<div class="description">
						The style of stroked lines; used in conjunction with <tt>lineWidth</tt> to
stroke the dot's shape. The default value of this property is a categorical
color.
						
						
					</div>
					
					

						
						
						
							<dl class="detailList">
							<dt class="heading">See:</dt>
							
							<dd><a href="../symbols/pv.html#.color">pv.color</a></dd>
							
							</dl>
						
						

					
				
			

<!-- ============================== method details ========================= -->		
			
				<div class="sectionTitle">
					Method Detail
				</div>
				
					<a name="anchor"> </a>
					<div class="fixedFont">
					
					<span class="light">{<a href="../symbols/pv.Anchor.html">pv.Anchor</a>}</span>
					<b>anchor</b>(name)
					
					</div>
					<div class="description">
						Constructs a new dot anchor with default properties. Dots support five
different anchors:<ul>

<li>top
<li>left
<li>center
<li>bottom
<li>right

</ul>In addition to positioning properties (left, right, top bottom), the
anchors support text rendering properties (text-align, text-baseline). Text is
rendered to appear outside the dot. Note that this behavior is different from
other mark anchors, which default to rendering text <i>inside</i> the mark.

<p>For consistency with the other mark types, the anchor positions are
defined in terms of their opposite edge. For example, the top anchor defines
the bottom property, such that a bar added to the top anchor grows upward.
						
						
					</div>
					
					
					
						
							<dl class="detailList">
							<dt class="heading">Parameters:</dt>
							
								<dt>
									<span class="light fixedFont">{string}</span> <b>name</b>
									
								</dt>
								<dd>the anchor name; either a string or a property function.</dd>
							
							</dl>
						
						
						
						
						
							<dl class="detailList">
							<dt class="heading">Returns:</dt>
							
								<dd><span class="light fixedFont">{<a href="../symbols/pv.Anchor.html">pv.Anchor</a>}</span> </dd>
							
							</dl>
						
						
						

					<hr />
				
					<a name="radius"> </a>
					<div class="fixedFont">
					
					<span class="light">{number}</span>
					<b>radius</b>()
					
					</div>
					<div class="description">
						Returns the radius of the dot, which is defined to be the square root of the
<a href="#size">#size</a> property.
						
						
					</div>
					
					
					
						
						
						
						
						
							<dl class="detailList">
							<dt class="heading">Returns:</dt>
							
								<dd><span class="light fixedFont">{number}</span> the radius.</dd>
							
							</dl>
						
						
						

					
				
			
			
<!-- ============================== event details ========================= -->		
			
			
			<hr />
		</div>

		
<!-- ============================== footer ================================= -->
		<div class="fineprint" style="clear:both">
			
			Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blank">JsDoc Toolkit</a> 2.3.0 on Tue Oct 06 2009 09:59:02 GMT-0700 (PDT)
		</div>
	</body>
</html>
